<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>快递详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			.work_name{width:100%;padding:.25rem .2rem;box-sizing:border-box;background:#fff;margin-bottom:.1rem;float:left;}
			.work_name>img{width:.82rem;height:.86rem;float:left;margin-right:.25rem;}
			.work_name>h5{width:6rem;float:left;line-height:.35rem;font-size:.32rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333;margin:.05rem 0 0 0;}
		    .work_name>.file_num{width:5rem;float:left;line-height:.3rem;font-size:.28rem;color:#666;margin-top:.12rem;}
		     .mui-bar-nav~.mui-content{padding:0;position:absolute;top:0;left:0;height:100%;overflow:auto;}
		     .blue{color:#104ffc;}
		     /*办理过程*/
			.work_process{width:100%;float:left;background:#fff;margin-top:.1rem;padding:.15rem 0;}
			.work_process>ul{padding:.2rem 0;width:6.7rem;float:left;border-left:1px dotted #cccccc;margin-left:.57rem;}
			.work_process>ul>li{width:100%;float:left;position:relative;padding-bottom:.3rem;margin-bottom:.27rem;}
			.work_process>ul>li:after{height:1px;background:#e0e0e0;position:absolute;bottom:0;width:6rem;left:.3rem;content:"";}
			.work_process>ul>li>span{float:left;width:6.5rem;margin-left:.3rem;position:relative;color:#999;}
			.work_process>ul>li>.process>span{color:#666;font-size:.3rem;line-height:.4rem;margin-bottom:.1rem;float:left;max-width:6.3rem;}
			.work_process>ul>li>.process .cir{width:.22rem;height:.22rem;position:absolute;top:.07rem;left:-.43rem;background:url(../../images/jindu/gray_cir.png) no-repeat;background-size:100% 100%;}
			.work_process>ul>li>.timer{font-size:.28rem;line-height:.35rem;}
			.work_process>ul>.process_active>.process .cir{background:url(../../images/jindu/blue_cir.png) no-repeat;background-size:100% 100%;}
			.work_process>ul>.process_active>.process>span{color:#333;}
			.work_process>ul>li:last-child:after{height:0;}
			
		</style>
	</head>
	<body>	
	<div class="mui-content" id="kuaidiInfo_m">
		<div class="work_name">
			<img src="../../images/jindu/already_file.png">
			<h5></h5>
			<div class="file_num">EMS单号：<span class="blue" id="logisticsNumber"></span></div>
		</div>
		<div class="work_process" v-if="hot_show">
			<ul>
				<template v-for="kuaidiInfo in kuaidiInfoList">
					<li>
						<span class="process"><span>{{kuaidiInfo.logisticsInfos}}</span><b class="cir"></b></span>				
					    <span class="timer">{{kuaidiInfo.timeInfo}}</span>
					</li>
				</template>
			</ul>
		</div>
		<div class="no_message" v-if="no_message">
	    	<img src="../../images/index/no_message.png">
	    	<p style="text-align: center;">暂时还没有任何相关内容~</p>
	    </div>
	</div>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/common.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/vue.min.js"></script>
	
	<script>
		mui.init();
		mui.plusReady(function() {
		   var logisticsNumber = utils.getUrlParam('logisticsNumber');
		   document.getElementById("logisticsNumber").innerText = logisticsNumber;
		   var param = 'logisticsNumber=' + logisticsNumber;
		   var url = 'appHttpTrackQuery/appTrackQuery.do';
		   utils.ajax(url, function(data) {
				utils.closeWaiting();
				try{
					data = JSON.parse(data);
					var state = data.state;
					if(state == '1') {
						kuaidiInfo_vm.no_message = true;
						mui.toast('系统内部错误');
						return;
					}
					
					var kuaidiInfos = JSON.parse(data.result);
					if(kuaidiInfos != null){
						var size = kuaidiInfos.length;
						if(size>0){
							kuaidiInfo_vm.hot_show = true;
							kuaidiInfo_vm.kuaidiInfoList = kuaidiInfos;
						}
					}
				}catch(e){
					kuaidiInfo_vm.hot_show = false;
					kuaidiInfo_vm.no_message = true;
					mui.toast('未查询到相关快递信息')
				}
			}, param);
			   
		});
			
			//热点新闻模板
		var kuaidiInfo_vm = new Vue({
		  el: '#kuaidiInfo_m',
		  data: {
		  	hot_show:false,
		  	no_message:false,
	  		kuaidiInfoList:[{timeInfo:'',logisticsInfos:''}]
		  }
		});
	</script>
	</body>
</html>
